/* 标签选择器 */
p {
    color: red;
    width: 500px;
    border: 1px solid black;
}
/* 并集选择器 */
p,li,h1 {
    color: red;
}
/* 交集选择器 */
h1+ul+p {
    color: aqua;
}
/* 孩子选择器 */
article p span {
    color: blue;
}
/* 继承 */
h1 {
    color: aqua;
}
h1 {
    color: brown;
}
/* 优先权 */
.title {
    color: aqua;
}
h1 {
    color: black;
}
/* 继承 */
.main {
    color: aqua;
    border: 2px solid #ccc;
}
.special {
    color: #000;
    font-weight: bold;
}
/* 伪类选择器 */
#pseude-class li:first-child {
    color:red;
}
#pseudo-class li:last-child {
    color: lime;
}
#pseudo-class p:first-of-type {
    color: fuchsia;
}
#pseudo-class p:last-of-type {
    color : blue;
}
#pseudo-class tr:nth-child(2n + 1 ) {
    background : gold ;
}
#pseudo-class tr:nth-last-child(2n + 1 ) {
    background : green;
}
.pc pre:nth-of-type( 2n + 1) {
    color : red;
}
.pc pre:nth-last-of-type( 2n + 1) {
    color : darkorange ;
}
input[ type="text" ] :enabled {background-color : burlywood ;
}
.red-input:focus {
    color : red ;
}
.disabled-input :disabled {
    color : yellow;
}
.invalid-input :invalid {
    color : green ;
}
.readonly-input :read-only {
    color : maroon;
}
#pseudo-element li:first-child ::before {
    content : "l";
    padding-right : 10px;
}
#pseudo-element li::after {
    content: "l";
    padding-left:18px;
    padding-right: 10px;
}
